import React,{useState,useRef} from 'react';

function UploadButton(){
    const [uploadedFileName,setUploadedFileName] = useState<string|null>(null);
    const inputRef = useRef<HTMLInputElement>(null);

    const handleUpload = ()=> {
        inputRef.current?.click();
    }

    const handleDisplayFileDetails = ()=> {
        inputRef.current?.files && setUploadedFileName(inputRef.current.files[0].name);
    }

    return (<div className='m-3'>
        <form action="api/fileupload" method="post" encType="multipart/form-data">
            <label className='mx-3'>Choose file:</label>
            <input ref={inputRef} onChange={handleDisplayFileDetails} className='d-none' type='file' name="filetoupload"></input>
            <button onClick={handleUpload} className={`btn btn-outline-${uploadedFileName ? "success":"primary"}`}>
                {uploadedFileName ? uploadedFileName : "Upload"}
            </button><br/>
            <input type="submit" value='Upload'/>
        </form>
    </div>)
}

export default UploadButton;